<template>
  <div class="repository-content" v-loading="loadPage">
    <template v-if="!loadPage">
      <!-- 关键词搜索框 -->
      <div class="search-input-container" ref="searchInput">
        <el-input
          class="search-input"
          :placeholder="$t('common.base.inputKeywordToSearch')"
          v-model="params.keyword"
          clearable
          @keyup.enter.native="inputSearch"
          @input="inputSearch"
          @clear="inputSearch"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <template v-if="listMsg && listMsg.length > 0">
        <list
          class="list"
          :keyword="params.keyword"
          :init-data="initData"
          :list="listMsg"
          :id.sync="info.id"
          @toDetail="toDetail"
          ref="list"
          v-loadmore="loadmoreOptions"
          :hx-id-obj="hxIdObj"
          :source="source"
        ></list>
        <div v-if="!hasNextPage" class="all-desc">{{$t('common.base.allResultsLoaded')}}</div>
      </template>
      <template v-else>
        <div class="default">
          <div class="default-img">
            <img :src="noDataImage" alt="" />
          </div>
          <div class="default-msg">{{$t('common.base.tip.noData')}}</div>
        </div>
      </template>
    </template>
  </div>
</template>
<script>
import * as RepositoryApi from '@src/api/Repository';
import List from './RepositoryList.vue';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { openAccurateTab } from '@src/util/platform'
/** util */
import { debounce } from 'lodash'
import { getOssUrl } from '@src/util/assets'
const noDataImage = getOssUrl('/no_data.png')
export default {
  name: 'im-repository',
  inject: ['initData'],
  props: {
    serviceList: {
      type: Array,
      default: () => [],
    },
    userDetail: {
      type: Object,
      default: () => ({}),
    },
    initData: {
      type: Object,
      default: () => ({}),
    },
    hxIdObj: {
      type: Object,
    },
    source: {
      type: String,
    },
  },

  data() {
    return {
      noDataImage,
      params: {
        label: '', // 标签
        keyword: '', // 搜索的关键词
        pageNum: 1,
        pageSize: 20,
        orderDetail: {
          // 排序
          isSystem: 1,
          column: '',
          type: '',
          sequence: 'desc',
        },
        view: 'published',
        type: [],
        fasterFindId: '',
      },
      tag: {
        name: '',
        show: false,
      }, // 选中的标签
      listTotal: null,

      listMsg: [], // 列表全部数据
      info: {
        // 传给右侧详情的文档id、allowShare
        id: null,
        allowShare: 0,
        isLast: false,
      },
      loadmoreOptions: {
        disabled: false,
        callback: this.loadmore,
      },
      hasNextPage:false, // 是否有下一页
      loadPage:true,
    };
  },
  async mounted() {
    await this.search();
    this.loadPage = false
  },
  methods: {
    inputSearch: debounce(function(){
      this.params.pageNum = 1;
      this.search();
    },200),
    toDetail(item) {
      // 新页面打开详情
      let fromId = window.frameElement.getAttribute('id');
      // this.$platform.openTab({
      //   id: `document_detail_${item.id}`,
      //   title: '知识库列表',
      //   url: `/wiki/detail/page?wikiId=${item.id}`,
      //   reload: true,
      //   close: true,
      //   fromId,
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageWikiDetail,
        key: item.id,
        params: `wikiId=${item.id}`,
        reload: true,
        fromId
      })
    },
    async loadmore() {
      this.loadmoreOptions.disabled = true;
      try {
        this.params.pageNum += 1;
        this.search();
      } catch (error) {
        console.error(error);
      }
    },
    // 获取文档库列表，将ListSearch、ListFooter组件传递的参数合并
    async search(params, flag) {
      // if (params) Object.assign(this.params, params);
      // if (flag) {
      //   localStorage.setItem('wiki_pageSize', this.params.pageSize);
      // }
      // this.$refs.listSearch.initView();
      // this.$refs.listSearch.getTypes();
      try {
        // this.$refs.documentDetail.loading = true;
        let res = await RepositoryApi.getDocumentList(this.params);
        // this.params.keyword = '';
        if (res.success) {
          // if (this.$refs.list) this.$refs.list.resetScrollTop();
          this.listTotal = res.result.total;
          if (res.result.list.length == 1 && res.result.nextPage == 0) {
            res.result.list[0].isLast = true;
          }

          res.result.list.forEach(item => {

            if (item.title.indexOf('<em>') != -1) {
              let replaceReg = new RegExp('<em>', 'g');
              item.handleTitle = item.title.replace(
                replaceReg,
                '<span style="color: #FF7B00">'
              );
              let reg = new RegExp('</em>', 'g');
              item.handleTitle = item.handleTitle.replace(reg, '</span>');
            } else {
              item.handleTitle = item.title;
            }

            if (item.content.indexOf('<em>') != -1) {
              let replaceReg = new RegExp('<em>', 'g');
              item.handleContent = item.content.replace(
                replaceReg,
                '<span style="color: #FF7B00">'
              );
              let reg = new RegExp('</em>', 'g');
              item.handleContent = item.handleContent.replace(reg, '</span>');
            } else {
              item.handleContent = item.content;
            }
          });
          if (this.params.pageNum == 1) {
            this.listMsg = res.result.list;
          } else {
            this.listMsg = this.listMsg.concat(res.result.list);
          }
          this.loadmoreOptions.disabled = !res.result.hasNextPage;
          this.hasNextPage = res.result.hasNextPage
          // this.listMsg.push(res.result.list);
          // this.toDetail(this.listMsg.list[0]);
        } else {
          // this.$refs.documentDetail.loading = false;
          this.$platform.notification({
            title: res.message,
            type: 'error',
          });
        }
      } catch (err) {
        console.error(err);
        this.params.keyword = '';
        // this.$refs.documentDetail.loading = false;
      }
    },
  },
  components: {
    [List.name]: List,
  },
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none;
}
.repository-content {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  .search-input-container {
    margin-bottom: 10px;
  }
  .all-desc{
    padding: 10px 0;
    text-align: center;
    color: #909399;
  }
}
.document-list-container {
  overflow: auto;
  flex: 1;
  display: block;
}
.default {
  text-align: center;
  .default-img {
    margin-top: 80px;
    img {
      width: 160px;
      height: 160px;
    }
  }
  .default-msg {
    margin-top: 8px;
    color: $text-color-regular;
  }
}
</style>
